<template>
    <div class="main">
        <van-form @submit="onSubmit">
            <div class="container" v-for="item in uiState">
                <div class="item">
                    <div class="nav">
                        <img :src="icons.titleIcon" class="icon">
                        <img :src="icons.lineIcon" class="line" v-if="item !== '审批'">
                    </div>
                    <div class="content">
                        <div class="title" v-text="item"></div>
                        <van-cell-group class="platform-info" v-if="item === '发送平台'">
                            <div
                                v-for="subTitle in platformData"
                                v-text="subTitle.name"
                                :class="form.platform === subTitle.id ? 'text-select' : 'text-normal'"
                                @click="form.platform = subTitle.id">
                            </div>
                        </van-cell-group>
                        <van-cell-group class="base-info" v-else-if="item === '基本信息'">
                            <div>
                                <span class="symbol">*</span>
                                <span class="sub-title">指令名称</span>
                            </div>
                            <van-field :border="false" v-model="form.name" placeholder="请输入指令名称" class="name" />
                            <div class="divider"></div>
                            <span class="sub-title">指令描述</span>
                            <van-field v-model="form.desc" rows="2" autosize type="textarea" maxlength="500"
                                show-word-limit name="content" placeholder="请输入指令描述" class="desc" />
                            <div class="divider"></div>
                            <div>
                                <span class="symbol">*</span>
                                <span class="sub-title">目标平台</span>
                            </div>
                            <van-field is-link readonly @click="handleTargetPlatform"
                                v-model="targetPlatformData" class="picker" :border="false">
                                <template #input>
                                    <div class="target">
                                        <span class="text">{{ targetPlatformData }}</span>
                                        <img class="icon-add" :src="icons.addIcon">
                                    </div>
                                </template>
                            </van-field>
                            <div class="divider"></div>
                            <span class="sub-title">附件上传</span>
                            <van-uploader v-model="form.file" :max-count="1" class="upload">
                                <div class="upload-files">
                                    <img class="icon-upload" :src="icons.uploadIcon">
                                    <span class="text-upload">点击上传</span>
                                </div>

                            </van-uploader>

                        </van-cell-group>
                        <van-cell-group class="fallback" v-else-if="item === '反馈信息'">
                            <div>
                                <span class="symbol">*</span>
                                <span class="sub-title">办理期限</span>
                            </div>
                            <van-field is-link readonly @click="picker.time.startTimeShow = true"
                                v-model="picker.time.text" class="picker" :border="false">
                                <template #input>
                                    <div class="target">
                                        <span class="text">{{ picker.time.text }}</span>
                                        <img class="icon-add" :src="icons.calenderIcon">
                                    </div>
                                </template>
                            </van-field>
                            <van-popup position="bottom" v-model:show="picker.time.startTimeShow">
                                <van-datetime-picker
                                    type="datetime"
                                    title="选择开始时间"
                                    :min-date="picker.time.minDate"
                                    :max-date="picker.time.maxDate"
                                    @cancel="picker.time.startTimeShow = false"
                                    @confirm="onStartTimeConfirm" />
                            </van-popup>
                            <van-popup position="bottom" v-model:show="picker.time.endTimeShow">
                                <van-datetime-picker
                                    type="datetime"
                                    title="选择结束时间"
                                    :min-date="picker.time.minDate"
                                    :max-date="picker.time.maxDate"
                                    @cancel="picker.time.endTimeShow = false"
                                    @confirm="onEndTimeConfirm" />
                            </van-popup>
                            <div class="divider"></div>
                            <span class="sub-title">重复周期</span>
                            <van-field is-link readonly @click="picker.cycle.show = true"
                                v-model="picker.cycle.text" class="picker" :border="false">
                                <template #input>
                                    <div class="target">
                                        <span class="text">{{ picker.cycle.text }}</span>
                                        <img class="icon-next" :src="icons.nextIcon">
                                    </div>
                                </template>
                            </van-field>
                            <van-calendar :columns="picker.cycle.columns" v-model:show="picker.cycle.show"
                                @cancel="picker.cycle.show = false" @confirm="onCycleConfirm" type="range" />
                            <div class="divider"></div>
                            <div>
                                <span class="symbol">*</span>
                                <span class="sub-title">反馈内容</span>
                            </div>
                            <van-field v-model="form.callback" rows="2" autosize type="textarea" maxlength="500"
                                show-word-limit name="content" placeholder="请输入反馈内容" class="desc" />

                            <div class="divider"></div>
                            <span class="sub-title">模板编辑</span>
                            <div class="text-container" @click="edit">点击编辑</div>
                            <div class="divider"></div>
                            <span class="sub-title">反馈附件</span>
                            <van-uploader v-model="form.callbackFile" :max-count="1" class="upload">
                                <div class="upload-files">
                                    <img class="icon-upload" :src="icons.uploadIcon">
                                    <span class="text-upload">点击上传</span>
                                </div>

                            </van-uploader>
                            <div class="divider"></div>
                            <span class="sub-title">抄送机构</span>
                            <van-field class="type" :border="false">
                                <template #input>
                                    <van-radio-group direction="horizontal" v-model="form.sendPlatform">
                                        <van-radio :name="ccItem.id" v-for="ccItem in ccPlatformData">
                                            <template #icon="props">
                                                <img class="img-icon"
                                                    :src="props.checked ? icons.checkedIcon : icons.unCheckIcon" />
                                            </template>
                                            {{ ccItem.name }}
                                        </van-radio>
                                    </van-radio-group>
                                </template>
                            </van-field>
                            <van-field is-link readonly @click="picker.mechanism.show = true"
                                v-model="picker.mechanism.text" class="picker" :border="false"
                                v-if="ccSelectShow">
                                <template #input>
                                    <div class="target">
                                        <span class="text">{{ picker.mechanism.text }}</span>
                                        <img class="icon-next" :src="icons.nextIcon">
                                    </div>
                                </template>
                            </van-field>
                            <van-popup v-model:show="picker.mechanism.show" position="bottom">
                                <van-picker
                                    :columns="picker.mechanism.columns"
                                    @cancel="picker.mechanism.show = false"
                                    @confirm="onMechanismConfirm"
                                    value-key="fullName" />
                            </van-popup>
                        </van-cell-group>
                        <div class="approval" v-else-if="item === '审批'">
                            <div>
                                <span class="symbol">*</span>
                                <span class="sub-title">审批人</span>
                            </div>
                            <van-field is-link readonly @click="picker.approval.show = true"
                                v-model="picker.approval.text" class="picker" :border="false">
                                <template #input>
                                    <div class="target">
                                        <span class="text">{{ picker.approval.text }}</span>
                                        <img class="icon-next" :src="icons.nextIcon">
                                    </div>
                                </template>
                            </van-field>
                            <van-popup v-model:show="picker.approval.show" position="bottom">
                                <van-picker
                                    :columns="picker.approval.columns"
                                    @cancel="picker.approval.show = false"
                                    @confirm="onApprovalConfirm"
                                    value-key="appUserName" />
                            </van-popup>
                            <div class="divider"></div>
                            <span class="sub-title">抄送人</span>
                            <van-field is-link readonly @click="picker.send.show = true"
                                v-model="picker.send.text" class="picker" :border="false">
                                <template #input>
                                    <div class="target">
                                        <span class="text">{{ picker.send.text }}</span>
                                        <img class="icon-next" :src="icons.nextIcon">
                                    </div>
                                </template>
                            </van-field>
                            <van-popup v-model:show="picker.send.show" position="bottom">
                                <van-picker
                                    :columns="picker.send.columns"
                                    @cancel="picker.send.show = false"
                                    @confirm="onSendConfirm"
                                    value-key="appUserName" />
                            </van-popup>
                        </div>
                    </div>

                </div>

            </div>
        </van-form>
    </div>
    <div class="tab-bottom">
        <div class="confirm" @click="onSubmit">确 定</div>
        <div class="reset" @click="reset">重 置</div>
    </div>
    <router-view @params="acceptValue" />
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue';
import unCheckIcon from '@/assets/imgs/workbench/wb_uncheck.png';
import checkIcon from '@/assets/imgs/workbench/wb_checked.png';
import lineIcon from '@/assets/imgs/workbench/wb_bi_line.png';
import titleIcon from '@/assets/imgs/workbench/wb_ot_title.png';
import addIcon from '@/assets/imgs/workbench/wb_add.png';
import uploadIcon from '@/assets/imgs/workbench/wb_upload.png';
import nextIcon from '@/assets/imgs/workbench/wb_next.png';
import calenderIcon from '@/assets/imgs/workbench/wb_calender.png';
import Toast from 'vant/lib/toast'
import { DICT_CC_INFO, DICT_COMPLIANCE, DICT_PLATFORM, DICT_PLATFORM_INFO } from '@/api/types/dict';
import { dictinfo, getApprovalUser, getCCPlatform, getTargetPlatformById, getTargetPlatformId, getTargetUser, sendTask } from '@/api/ordertask';
import { useRouter } from 'vue-router'
import { dateFormat } from '@/utils/utils';
import { uploadFile } from '@/api/file';
import { TargetPlatform } from '@/api/types/task';

const router = useRouter()

const icons = reactive({
    titleIcon: titleIcon,
    lineIcon: lineIcon,
    addIcon: addIcon,
    uploadIcon: uploadIcon,
    nextIcon: nextIcon,
    calenderIcon: calenderIcon,
    checkedIcon: checkIcon,
    unCheckIcon: unCheckIcon,
})

// 平台数据
const platformData = ref([] as any)
// 抄送机构
const ccPlatformData = ref([] as any)
// 目标平台
const targetPlatformData = ref('请选择')
const ccSelectShow = ref(false)
const uiState = ref(['发送平台', '基本信息', '反馈信息', '审批'])

const picker = reactive({
    time: {
        startTimeShow: false,
        endTimeShow: false,
        text: '请选择',
        minDate: new Date(),
        maxDate: new Date(2025, 10, 1),
        columns: [] as any
    },
    cycle: {
        show: false,
        text: '请选择',
        columns: [] as any
    },
    mechanism: {
        show: false,
        text: '请选择',
        columns: [] as any
    },
    approval: {
        show: false,
        text: '请选择',
        columns: [] as any
    },
    send: {
        show: false,
        text: '请选择',
        columns: [] as any
    },
})

const form = ref({
    platform: '',
    level: '',
    name: '',
    desc: '',
    target: [] as any,
    file: [],
    startTime: '',
    endTime: '',
    cycle: '',
    callback: '',
    callbackFile: [],
    templateId:'',
    sendPlatform: '',
    mechanism: '',
    approval: '',
    send: ''
})

const reset = () => {
    picker.time.text = "请选择";
    picker.cycle.text = "请选择";
    picker.mechanism.text = "请选择";
    picker.approval.text = "请选择";
    picker.send.text = "请选择";
    form.value.platform = platformData.value[0].id;
    form.value.name = '';
    form.value.desc = '';
    form.value.target = [] as any;
    form.value.file = [];
    form.value.startTime = '';
    form.value.endTime = ''
    form.value.cycle = '';
    form.value.callback = '';
    form.value.callbackFile = [];
    form.value.sendPlatform = ccPlatformData.value[0].id;
    form.value.mechanism = '';
    form.value.approval = '';
    form.value.send = '';
}

const formatDate = (date: any) => `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
const onStartTimeConfirm = (date: any) => {
    form.value.startTime = dateFormat(date, 'yyyy-MM-dd hh:mm:ss')
    picker.time.startTimeShow = false
    picker.time.endTimeShow = true
}

const onEndTimeConfirm = (date: any) => {
    form.value.endTime = dateFormat(date, 'yyyy-MM-dd hh:mm:ss')
    picker.time.startTimeShow = false
    picker.time.endTimeShow = false
    picker.time.text = form.value.startTime + ' - ' + form.value.endTime
}

const onCycleConfirm = (date: any) => {
    const [start, end] = date;
    picker.cycle.text = `${formatDate(start)} - ${formatDate(end)}`;
    form.value.cycle = `${formatDate(start)} - ${formatDate(end)}`;
    picker.cycle.show = false;
}

const onMechanismConfirm = (item: any) => {
    picker.mechanism.text = item.fullName;
    form.value.mechanism = item.deptId;
    picker.mechanism.show = false;
}

const onApprovalConfirm = (item: any) => {
    picker.approval.text = item.appUserName;
    form.value.approval = item.appUserId;
    picker.approval.show = false;
}

const onSendConfirm = (item: any) => {
    picker.send.text = item.appUserName;
    form.value.send = item.appUserId;
    picker.send.show = false;
}

const edit = () => {
    router.push('/compliance/edit');
}

//接受子路由传来的数据
const acceptValue = (value: any, type: any) => {
    if (value === null) return
    if (type === '1') {
        const json: Array<TargetPlatform> = JSON.parse(value || '{}')
        if (json.length === 0) return
        targetPlatformData.value = ''
        form.value.target = Array(json.length)
        for (var i = 0; i < json.length; i++) {
            if (i === json.length - 1) {
                targetPlatformData.value += json[i].fullName
            } else {
                targetPlatformData.value += json[i].fullName + ','
            }
            form.value.target[i] = json[i].deptId
        }
    } else if (type === '2') {
        form.value.templateId = value
        console.log('模板id为'+ value)
    }
}


//获取平台字典
const getDictPlatInfo = async () => {
    const dictInfo = await dictinfo(DICT_PLATFORM_INFO)
    const platform = dictInfo.data.map((item: any) => {

        item.id = item.dictCode
        item.name = item.dictName
        return item
    }).filter((item) => {
        return item.id === DICT_PLATFORM;
    });
    platformData.value = platform
    form.value.platform = platformData.value[0].id
}

//获取抄送机构
const getDictCCInfo = async () => {
    const dictInfo = await dictinfo(DICT_CC_INFO)
    const cc = dictInfo.data.map((item: any) => {
        item.id = item.dictCode
        item.name = item.dictName
        return item
    })
    ccPlatformData.value = cc
    form.value.sendPlatform = ccPlatformData.value[0].id
}
//点击时请求目标平台
const handleTargetPlatform = () => {
    router.push({
        path: '/compliance/targetPlatform', query: {
            code: form.value.platform
        }
    });
}

//获取抄送机构
const getCCOrg = async () => {
    if (!form.value.target) {
        Toast({
            message: '请先选择目标平台',
            position: 'bottom',
        });
        return
    }
    const ccData = await getCCPlatform({
        orgId: form.value.target,
        level: form.value.sendPlatform
    })
    picker.mechanism.columns = ccData.data
}
//获取审批人
const getApproval = async () => {

    const approvalUserData = await getApprovalUser({
        taskType: DICT_COMPLIANCE,
        taskLevel: ''
    })
    picker.approval.columns = approvalUserData.data
}

//获取抄送人
const getCCUser = async () => {
    const ccData = await getTargetUser()
    picker.send.columns = ccData.data
}

/**
 * 表单提交
 */
const onSubmit = async () => {
    if (!formCheck()) return
    const data = await sendTask({
        taskType: DICT_COMPLIANCE,
        taskLevel: form.value.level,
        taskName: form.value.name,
        taskDescription: form.value.desc,
        targetPlatformId: form.value.target,
        disposalAdvice: '',
        disposalAdviceDetails: '',
        basisType: '',
        basisSelection: '',
        startHandleTime: form.value.startTime,
        endHandleTime: form.value.endTime,
        feedbackContent: form.value.callback,
        templateId: form.value.templateId,
        ccOrg: [form.value.mechanism],
        approvalById: form.value.approval,
        ccById: [form.value.send],
        sendTarget: form.value.send,
        ccOrgssx: '',
        value1: []
    })
    if (data.code === 0) {
        Toast({
            message: '提交成功',
            position: 'bottom',
        });
        router.back();
    }
    if (form.value.file) {
        uploadFile(form.value.file)
    }
    if (form.value.callbackFile) {
        uploadFile(form.value.callbackFile)
    }
}

const formCheck = () => {
    if (!form.value.name) {
        Toast({
            message: '请输入指令名称',
            position: 'bottom',
        });
        return false
    }
    if (!form.value.desc) {
        Toast({
            message: '请输入指令描述',
            position: 'bottom',
        });
        return false
    }
    if (!form.value.target) {
        Toast({
            message: '请选择目标平台',
            position: 'bottom',
        });
        return false
    }
    if (!form.value.startTime) {
        Toast({
            message: '请选择办理期限',
            position: 'bottom',
        });
        return false
    }
    if (!form.value.callback) {
        Toast({
            message: '请输入反馈内容',
            position: 'bottom',
        });
        return false
    }
    if (!form.value.approval) {
        Toast({
            message: '请选择审批人',
            position: 'bottom',
        });
        return false
    }
    return true
}

onMounted(() => {
    getCCUser()
    getApproval()
    getDictPlatInfo()
    getDictCCInfo()
})

watch(() => form.value.sendPlatform, () => {
    ccSelectShow.value = form.value.sendPlatform !== ccPlatformData.value[0].id
    if (!ccSelectShow.value) return
    getCCOrg()
})

watch(() => form.value.target, () => {
    if (!form.value.target) return
    getCCOrg()
})
</script>
<style lang="scss" scoped>
.main {
    padding: 12px 12px 62px 12px;

    .container {
        display: flex;
        flex-direction: column;

        .item {
            display: flex;
            flex-direction: row;
            height: 100%;

            .nav {
                width: 12px;
                margin-top: 3px;
                display: flex;
                flex-direction: column;

                .icon {
                    width: 12px;
                    height: 12px;
                }

                .line {
                    width: 0.5px;
                    height: 100%;
                    margin-left: 6px;
                }
            }

            .content {
                width: 100%;
                display: flex;
                flex-direction: column;
                margin-left: 8px;

                .title {
                    width: auto;
                    height: 17.5px;
                    font-size: 18px;
                    font-family: PingFang SC, PingFang SC-Bold;
                    font-weight: 700;
                    text-align: left;
                    color: #181818;
                }

                .platform-info {
                    width: 100%;
                    background: #ffffff;
                    border-radius: 5px;
                    box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    flex-direction: row;
                    margin: 16px 0;
                    padding: 8px 0;
                    box-sizing: border-box;

                    .text-normal {
                        width: 82.5px;
                        height: 20px;
                        border-radius: 2.5px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #FAFAFA;
                        margin: 8px 0px 8px 12px;
                        font-size: 10px;
                        font-family: PingFang SC, PingFang SC-Medium;
                        color: #4c69dc;
                        line-height: 25px;
                    }

                    .text-select {
                        width: 82.5px;
                        height: 20px;
                        border-radius: 2.5px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #f1f4ff;
                        margin: 8px 0px 8px 12px;
                        font-size: 10px;
                        font-family: PingFang SC, PingFang SC-Medium;
                        color: #4c69dc;
                        line-height: 25px;
                    }
                }

                .base-info {
                    width: 100%;
                    background: #ffffff;
                    border-radius: 5px;
                    box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    margin: 16px 0;
                    padding: 16px 12px;
                    box-sizing: border-box;

                    .name {
                        background-color: #FFFFFF;
                        border: 0.5px solid #F7F7F7;
                        border-radius: 5px;
                        font-size: 10px;
                        margin-top: 8px;
                        padding: 0 0 0 14px;
                        background: url('../../../assets/imgs/workbench/wb_bi_input.png');
                    }
                }


                .fallback {
                    width: 100%;
                    background: #ffffff;
                    border-radius: 5px;
                    box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    margin: 16px 0;
                    padding: 16px 12px;
                    box-sizing: border-box;

                    .text-container {
                        width: 82.5px;
                        height: 20px;
                        border-radius: 2.5px;
                        display: flex;
                        margin-top: 8px;
                        align-items: center;
                        justify-content: center;
                        background: url('../../../assets/imgs/workbench/wb_bg_text.png');
                        font-size: 10px;
                        font-family: PingFang SC, PingFang SC-Medium;
                        font-weight: bold;
                        color: #4c69dc;
                        line-height: 25px;
                    }
                }

                .approval {
                    width: 100%;
                    background: #ffffff;
                    border-radius: 5px;
                    box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    margin: 16px 0;
                    padding: 16px 12px;
                    box-sizing: border-box;
                }

            }
        }
    }
}

.sub-title {
    font-size: 10px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: bold;
    text-align: left;
    color: #181818;
    margin-left: 4px;
}

.symbol {
    font-size: 10px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: bold;
    text-align: left;
    color: #eb0000;
}

.divider {
    width: 100%;
    height: 1px;
    margin: 12px 0;
    background: url('../../../assets/imgs/workbench/wb_bi_line.png');
}

.target {
    width: 100%;
    height: 24px;
    padding: 0 14px;
    border-radius: 2.5px;
    background: url('../../../assets/imgs/workbench/wb_bi_input.png');
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;

    .text {
        font-size: 10px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
        color: #a9a9a9;
    }

    .icon-add {
        width: 8px;
        height: 8px;
        margin-left: auto;
    }

    .icon-next {
        width: 5.5px;
        height: 8.5px;
        margin-left: auto;
    }
}

.picker {
    width: 100%;
    border: 0.5px solid #F7F7F7;
    border-radius: 5px;
    font-size: 10px;
    margin-top: 8px;
    padding: 0;
    display: flex;

    &:deep(.van-cell__right-icon) {
        display: none;
    }
}

.upload {
    margin-top: 8px;

    .upload-files {
        width: 82px;
        height: 20px;
        border-radius: 2.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        background: url('../../../assets/imgs/workbench/wb_bg_text.png');



        .icon-upload {
            width: 6px;
            height: 7px;
            margin-right: 4px;
        }

        .text-upload {
            font-size: 10px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: 500;
            color: #4c69dc;
        }
    }
}


.type {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
    background-color: #FFFFFF;

    &:deep(.van-radio__icon) {
        flex: none;
        display: flex;
        font-size: 10px;
        align-items: center;
        justify-content: center;

        .img-icon {
            width: 8px;
            height: 8px;
        }
    }

    &:deep(.van-radio__label) {
        font-size: 10px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: bold;
        text-align: left;
        color: #646464;
        line-height: 25px;
        margin-left: 4px;
    }


}

.desc {
    background-color: #FFFFFF;
    border: 0.5px solid #F7F7F7;
    border-radius: 5px;
    font-size: 10px;
    margin-top: 8px;
    padding: 0 0 0 14px;
    background: url('../../../assets/imgs/workbench/wb_bi_input.png');

    &:deep(.van-field__word-limit) {
        font-size: 7px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        color: #a9a9a9;
        margin-right: 2px;
        text-align: right;
    }

    &:after {
        content: none;
    }
}

.tab-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #ffffff;
    box-shadow: 0px -1px 2.5px 1px rgba(0, 0, 0, 0.03), -0.5px 0px 0px 0.5px #ebebeb inset;
    line-height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 6px;
    box-sizing: border-box;

    .confirm {
        width: 169.5px;
        height: 30px;
        background: #f1f4ff;
        border-radius: 5px;
        flex: 1;
        text-align: center;
        margin: 0 6px;
        line-height: 30px;

        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: bold;
        color: #4c69dc;
    }

    .reset {
        width: 169.5px;
        height: 30px;
        background: #f7f7f7;
        border-radius: 5px;
        flex: 1;
        text-align: center;
        margin: 0 6px;
        line-height: 30px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: bold;
        color: #4c69dc;
    }
}
</style>